<template>
  <div class="main">
    <h1>大学科技园入园流程</h1>
    <div class="process">
      <div
          v-for="(step, index) in steps"
          :key="index"
          class="step"
      >
        <div
            class="card"
            :class="{ active: currentStep === index }"
            @click="changeStep(index)"
        >
          <div class="title">{{ step.title }}</div>
          <div class="content">{{ step.content }}</div>
        </div>
        <div class="line" v-if="index < steps.length - 1"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

interface Step {
  title: string;
  content: string;
}

const steps = ref<Step[]>([
  {
    title: '一、政策咨询、洽谈入驻意向',
    content: '咨询电话：0773-2208258、2208536',
  },
  {
    title: '二、提交入园申请',
    content: '填写大学科技园入驻申请书、提交相关证明材料（获奖证书、专利、教师证、学生证等）',
  },
  {
    title: '三、入驻审批',
    content: '1. 审核优先入驻条件 2. 办公室初审 3. 部门负责人决策，确定装修免租期 4. 重要企业入驻相关优惠政策报校领导批准',
  },
  {
    title: '四、签署入驻协议',
    content: '大学科技园入驻协议（包括入驻协议及租房协议）',
  },
  {
    title: '五、企业注册/变更地址',
    content: '科技园提供相关注册/变更配套材料',
  },
  {
    title: '六、提交装修方案备案',
    content: '包括装修保证书和装修计划书',
  },
  {
    title: '七、入园登记',
    content: '提交相关工商注册材料备案',
  },
  {
    title: '八、正式入园',
    content: '享受科技园内科技创新服务及相关优惠政策',
  },
]);

const currentStep = ref<number>(0);
function changeStep(index: number) {
  currentStep.value = index;
}
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  padding: 20px;
  h1 {
    text-align: center;
    margin-bottom: 30px;
  }
}

.process {
  width: 100%;
  flex-wrap: wrap;
  display: flex;
  justify-content: center;
  align-items: center;

  .step {
    display: flex;
    align-items: center;

    .card {
      margin: 20px 0;
      position: relative;
      width: 200px;
      height: 200px;
      padding: 20px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      transition: all 0.3s ease-in-out;
      cursor: pointer;

      &.active {
        background-color: #3c8dbc;
        color: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

        .title {
          color: #fff;
        }
        .content {
          color: #fff;
        }
      }

      .title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      .content {
        font-size: 14px;
      }
    }
    .line {
      margin-left: 10%;
      width: 60px;
      height: 40px;
      background-color: #3c8dbc;
      -webkit-clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
      clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
    }
  }
}

@media (max-width: 1200px) {
  .process {
    .step {
      .card {
        width: 180px;
        height: 180px;
        padding: 15px;
      }
    }
  }
}

@media (max-width: 900px) {
  .process {
    .step {
      .card {
        width: 160px;
        height: 160px;
        padding: 12px;
      }
      .line {
        width: 50px;
        height: 30px;
      }
    }
  }
}

@media (max-width: 768px) {
  .process {
    flex-direction: column;

    .step {
      flex-direction: column;

      .line {
        margin-left: 0;
        margin-top: 10px;
        margin-bottom: 10px;
        transform: rotate(90deg);
      }
    }
  }
}
</style>